/**
 * 簿记模态框
 * 2022-11-09
 */
import React from 'react';
import { connect } from 'dva';
import { ModalC, TableC } from '../../../../comps';
import style from './index.less';
import moment from 'moment';
class bookkeepingC extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      columns: [], // 表格头
      dataSource: [], // 表格数据
      pageInfo: {
        // 页码信息
        currentPage: 1, // 当前页码
        pageSize: 10, // 每页数量
        total: 0, // 总数
      },
    };
  }

  componentDidMount() {
    this.getTableData();
  }
  //获取表格数据
  getTableData = () => {
    const { dispatch, portfolioId } = this.props;
    const { pageInfo } = this.state;
    dispatch({
      type: 'bookkeepingSettleM/getList',
      payload: {
        params: {
          search_GTE_createdTs: moment().format('YYYY-MM-DD'),
          search_LTE_createdTs: moment().format('YYYY-MM-DD'),
          portfolioId: [portfolioId],
          search_IN_type: '6;12',
          search_IN_method: '0;1',
          userId: localStorage.getItem('antd-pro-userId'),
        },
        current: pageInfo.currentPage,
        pageSize: pageInfo.pageSize,
      },
      callback: (res) => {
        if (res) {
          const newColumns = res.columns.filter((i) => i.workStation);
          this.setState({
            columns: newColumns, // 表格头
            dataSource: res.dataSource, // 表格数据
            pageInfo: res.pageInfo, // 页码信息
          });
        } else {
          this.setState({
            dataSource: [], // 表格数据
          });
        }
      },
    });
  };

  //表格页码响应
  handleTableChange = (pagination) => {
    const { current, pageSize } = pagination;
    this.setState(
      {
        pageInfo: {
          ...this.state.pageInfo,
          currentPage: current,
          pageSize,
        },
      },
      () => this.getTableData(),
    );
  };
  // 改变columns的样式
  changeColumns = (columns) => {
    if (columns.length && columns[columns.length - 1].title != '操作') {
      columns.push({
        title: '操作',
        dataIndex: 'operate',
        key: 'operate',
        type: 'operate',
        // fixed: 'right',
        operates: [
          {
            title: '撤销',
            onClick: (record, index) => {
              this.revocation(record.id);
            },
            isPopWindow: true,
            PopWindowText: '确定撤销',
            rules: {
              hide: {
                items: [{ key: 'instructionStatus', value: ['6', '11'], relation: ['=', '='] }],
                relation: 'or',
              },
            },
          },
          {
            //交收状态时已交收和到期交收时不可点击
            title: '交收',
            onClick: (record, index) => {
              this.settlement(record.id);
            },
            isPopWindow: true,
            PopWindowText: '确定交收',
            rules: {
              hide: {
                items: [{ key: 'instructionStatus', value: ['7', '8', '4'], relation: ['=', '=', '='] }],
                relation: 'or',
              },
            },
          },
        ],
      });
    }
    columns.forEach((element) => {
      if (element.dataIndex === 'createdTs') {
        element.title = '下达时间';
        element.width = 175;
        element.render = (val) => <span>{moment(val).format('YYYY-MM-DD HH:mm:ss')}</span>;
      }
      if (element.dataIndex === 'productName') {
        element.title = '产品/组合';
        element.width = 160;
        element.render = (val, record) => (
          <span>
            {record.productCode}-{val}
          </span>
        );
      }
      if (element.dataIndex === 'amount') {
        element.title = '交易价格';
      }
      if (element.dataIndex === 'settlementAmount') {
        element.title = '交易总额';
      }
      if (element.dataIndex === 'instructionStatus') {
        element.title = '交收状态';
      }
    });
  };
  // 响应撤销
  revocation = (ids) => {
    this.props.dispatch({
      type: 'bookkeepingSettleM/getTradeInstructionHS',
      payload: { ids },
      callback: (res) => {
        if (res === 'success') {
          this.getTableData();
        }
      },
    });
  };
  // 响应交收
  settlement = (id) => {
    this.props.dispatch({
      type: 'bookkeepingSettleM/getTradeInstruction',
      payload: { id },
      callback: (res) => {
        if (res === 'success') {
          this.getTableData();
        }
      },
    });
  };
  // 模态框内容
  modalContent = () => {
    const { loading } = this.props;
    const { columns, dataSource, pageInfo } = this.state;
    this.changeColumns(columns);
    return (
      <div>
        <TableC
          columns={columns || []}
          dataSource={dataSource || []}
          scroll={{ x: 1100, y: 320 }}
          loading={loading.effects['bookkeepingSettleM/getList']}
          rowKey={'id'}
          size={'small'}
          onChange={this.handleTableChange}
          current={pageInfo.currentPage}
          pageSize={pageInfo.pageSize}
          total={pageInfo.total}
        />
      </div>
    );
  };

  // 取消
  onCancel = () => {
    this.props.onCancel();
  };

  render() {
    return (
      <div className={style.modal}>
        <ModalC title={'簿记'} visible={this.props.visible} maskClosable={false} onCancel={this.onCancel} width={1200} height={420} footer={null}>
          <div>{this.modalContent()}</div>
        </ModalC>
      </div>
    );
  }
}
export default connect(({ bookkeepingSettleM, loading }) => ({ bookkeepingSettleM, loading }))(bookkeepingC);
